import React from 'react';
import { Collapse } from '@/molecules';
import { useCollapse } from '@/hooks';
import { Form } from 'antd';
import { AssessTask, AssessAbilityDetail } from '../containers';

import { useAssessSetting } from '../hooks';
import { TRIAL_ACTION } from '../constants';

const { Panel } = Collapse;

function AssessTutorW({ data = {} }) {
    const { activeKey, onChange } = useCollapse(['1', '2'], []);
    const { w } = useAssessSetting(data);

    const detail = React.useMemo(() => {
        const { assessWeekly = [] } = data;
        return assessWeekly.find(item => item.status === TRIAL_ACTION.ASSESS_TEACHER_WEEK) || {};
    }, [data]);

    return (
        <div>
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                {w.showTask && (
                    <Panel header="任务情况" key="1">
                        <AssessTask data={data} />
                    </Panel>
                )}
                {w.showAssess && (
                    <Panel header="能力评估" key="2">
                        <AssessAbilityDetail data={detail} record={data} />
                    </Panel>
                )}
            </Collapse>
        </div>
    );
}

export default Form.create({})(AssessTutorW);
